<template>
  <el-container class="el-container" direction="vertical">
    <el-row>
      <el-select v-model="selectStatus" placeholder="请选择订单状态" clearable @change="getTickets" size="small">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-row>
    <el-row>
      <el-table
        class="order-table"
        :data="tableData"
        v-loading="loading"
        border
        :header-cell-style="{background:'#ebecf0',color:'#000000',fontSize:'12px',fontWeight:'normal'}"
        style="width: 100%">
        <el-table-column
          prop="orderNum"
          label="订单编号"
          :align="'center'"
          width="200">
        </el-table-column>
        <el-table-column
          prop="username"
          label="账号"
          :align="'center'">
        </el-table-column>
        <el-table-column
          prop="seatInfo"
          label="座位信息"
          width="180"
          :align="'center'">
          <template slot-scope="scope">
            <el-row v-for="item in scope.row.seatInfo" :key="item">{{ item }}</el-row>
          </template>
        </el-table-column>
        <el-table-column
          prop="ticketCount"
          label="票品张数"
          :align="'center'">
        </el-table-column>
        <el-table-column
          prop="ticketPrice"
          label="订单金额"
          :align="'center'">
          <template slot-scope="scope">
            ￥ {{ scope.row.ticketPrice }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          :align="'center'">
        </el-table-column>
        <el-table-column
          prop="creatTime"
          label="创建时间"
          :align="'center'"
          width="200px">
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="wx">
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="pageSize">
      </el-pagination>
    </el-row>
  </el-container>
</template>

<script>
export default {
  name: 'EventPubOrder',
  props: {
    eventID: String
  },
  created () {
    this.getTickets()
  },
  data () {
    return {
      total: 10,
      pageSize: 10,
      curPage: 1,
      loading: false,
      tableData: [],
      selectStatus: '',
      options: [
        {
          label: '待支付',
          value: '待支付'
        },
        {
          label: '生效',
          value: '生效'
        },
        {
          label: '失效',
          value: '失效'
        },
        {
          label: '已退款',
          value: '已退款'
        }
      ]
    }
  },
  methods: {
    getTickets () {
      let _this = this
      _this.loading = true
      let url = '/api/tickets?page=' + this.curPage + '&pageSize=' + this.pageSize + '&eventID=' + this.eventID
      if (_this.selectStatus !== '') {
        url += '&status=' + _this.selectStatus
      }
      this.$axios({
        url: url,
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          _this.tableData = response.data.data.rows
          _this.total = response.data.data.total
          _this.loading = false
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    handleCurrentChange (val) {
      this.curPage = val
      this.loading = true
      this.getTickets()
    },
    refund (row) {
      console.log(row)
    },
    refundShow (row) {
      return this.isSaleDeadlineDate(row.eventInfo.startTime) && row.status === '生效'
    }
  }
}
</script>

<style scoped>
.el-container {
  width: 100%;
  margin: 0 auto;
}

.order-table {
  margin-top: 20px;
}

/* 修改表格悬停颜色 */
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}

.pagination {
  margin-top: 20px;
}
</style>
